<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<title></title>
	</head>
	<style type="text/css">
		#preview{
		  width: 100px;
		  height: 100px;
		}
	</style>
	<body>
		<input type="file" onchange="showPreview(this)"/>
		<div id="preview">
		</div>
		
	</body>
	<script>
			// var preview = 
			function showPreview(el){
				console.log(el)
			  var pv = document.getElementById("preview");
			  // IE5.5~9使用滤镜
			  if (pv.filters && typeof(pv.filters.item) === 'function'){
			    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
			  }
			  else{
			    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
			    var fr = new FileReader();
			    fr.onload = function(evt){
			      var pvImg = new Image();
			      pvImg.style.width = pv.offsetWidth + 'px';
			      pvImg.style.height = pv.offsetHeight + 'px';
			      pvImg.src = evt.target.result;
			      // pv.removeChild(0);
			      pv.appendChild(pvImg);
			    };
			    fr.readAsDataURL(el.files[0]);
			  }
			};
		
		

	</script>
</html>
